<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>半天妖烤鱼点餐系统</title>
</head>
<style>
    .t1 {
        background-color: #fff;
        padding: 20px;
        text-align: center;
        box-shadow: 0 2px 5px;
    }

    .cbl {
        width: 200px;
        height: 100%;
        position: fixed;
        background: #f5f5f5;
        padding-top: 20px;

    }

    .cbl_ul {
        width: 156px;
        height: auto;
        font-size: 20px;
        background-color: beige;
        margin-top: 30px;
    }

    .cbl_ul.li {
        width: 156px;
        margin-top: 15px;
    }

    .caidan {
        width: 800px;
        height: auto;
        background-color: aqua;
        position: relative;
        top: 0px;
        left: 202px;
    }

    .gwc_cai {
        width: 800px;
        height: auto;
        background-color: rgb(255, 111, 0);
        position: relative;
        top: 200px;
        left: 202px;
    }

    .zongjia {
        width: 100px;
        height: 50px;
        position: relative;
        top: 200px;
        left: 203px;
        font-size: 20px;
    }
</style>

<body>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="./4.3考试.js"></script>
    <div class="tou">
        <h1 class="t1" onclick="weizhi()">半天妖烤鱼.荥阳吾悦广场店 (点击查看位置)</h1>
        <!-- <button onclick="caidan()">菜单</button> -->
    </div>
    <div class="cbl">
        <ul class="cbl_ul">
            <li class="p">招牌烤鱼</li>
            <li class="p">专属虾锅</li>
            <li class="p">特色烧烤</li>
            <li class="p">小吃炸货</li>
        </ul>
    </div>
    <div class="caidan">
        <!-- <ul class="caidan_ul">
            <li><img src="" onclick="add()"></li>
            <li>菜名</li>
            <li>¥元</li>
            <li><button onclick="jia()">+</button>
                <span>0</span>
                <button onclick="jian()">-</button>
            </li>

        </ul> -->
    </div>
    <div class="zongjia">
        <span>总价</span><span class="money">0</span>
    </div>
    <ul class="gwc_cai">
        <li>
            <input type="checkbox">
            <img src="">
            <span>菜名</span>
            <span>¥元</span>
            <button onclick="jia()">+</button>
            <span>0</span>
            <button onclick="jian()">-</button>
        </li>
    </ul>

    <script type="text/javascript">
        //    数据
        var arr = [{
            pid: 0,
            id: 1,
            img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.76lrPRDEKfif8czi1IWmHwHaFg?rs=1&pid=ImgDetMain',
            name: '青花椒烤鱼',
            price: 79
        },
        {
            pid: 0,
            id: 2,
            img: 'https://x0.ifengimg.com/res/2023/B793D2B2B912317CEE5CB36A9753DF488F76BD4D_size498_w500_h666.png',
            name: '咖喱烤鱼',
            price: 79
        },
        {
            pid: 1,
            id: 3,
            img: 'https://pic3.zhimg.com/v2-a412898855103c4fbeabd1512ea15929_r.jpg?source=1940ef5c',
            name: '蒜你香专属大虾锅',
            price: 89
        },
        {
            pid: 1,
            id: 4,
            img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.yYTr3jTv-T6fBELHyYeJLgHaJ4?rs=1&pid=ImgDetMain',
            name: '辣了么专属大虾锅',
            price: 89
        },
        {
            pid: 2,
            id: 5,
            img: 'https://ts1.tc.mm.bing.net/th/id/R-C.c0b89c4104b92147d5f9af78a107b7bf?rik=MOa8fPLWm1GMvA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50021%2f2069.jpg_wh860.jpg&ehk=pxqxSdi1DrIrAuvlItkijJwVk2Kf%2fanWqtlU3Heq5mE%3d&risl=&pid=ImgRaw&r=0',
            name: '大叉烤肉',
            price: 12
        },
        {
            pid: 2,
            id: 6,
            img: 'https://img95.699pic.com/photo/60034/7094.jpg_wh860.jpg',
            name: '烤翅中',
            price: 2
        },
        {
            pid: 3,
            id: 7,
            img: 'https://img.alicdn.com/i4/2207584475510/O1CN01ewkBq91qZd6M4HDTo_!!2207584475510.png',
            name: '茴香小油条',
            price: 22.8
        },
        {
            pid: 3,
            id: 8,
            img: 'http://5b0988e595225.cdn.sohucs.com/images/20191116/1f2f8dcb11684c1fa7c9006b42739dd8.jpeg',
            name: '川香酥肉',
            price: 79
        },]
        // 位置
        function weizhi() {
            location.assign('./地图.html')
        }
        // 菜单渲染
        // 初始页面
        var p = document.querySelectorAll('.p')
        var caidan = document.querySelector('.caidan')
        arr.forEach(item2 => {
            if (item2.pid == 0) {
                caidan.innerHTML += `
                         <ul>
                             <li><img src="${item2.img}" onclick="add(${item2.id})"></li>
                             <li>${item2.name}</li>
                             <li>¥${item2.price}元</li>
                        </ul>
                        `

            }
        })
        // 渲染所有
        p.forEach((item, index) => {
            item.addEventListener('click', () => {
                caidan.innerHTML = ''
                arr.forEach(item2 => {
                    if (item2.pid == index) {
                        caidan.innerHTML += `
                         <ul>
                             <li><img src="${item2.img}" onclick="add(${item2.id})"></li>
                             <li>${item2.name}</li>
                             <li>¥${item2.price}元</li>
                        </ul>
                        `
                    }
                })
            })
        })


        // 购物车
        var gwc = []
        var gwc_cai = document.querySelector('.gwc_cai')
        // 添加
        function add(i) {
            var a = arr.find(item => item.id == i)
            gwc.push({
                id: gwc.length,
                img: a.img,
                name: a.name,
                price: a.price,
                num: 1,
                // is: false
            })
            apply()
        }
        // 渲染购物车
        function apply() {
            gwc_cai.innerHTML = ''
            gwc.forEach(item => {
                gwc_cai.innerHTML += `
                 <li>
            <input type="checkbox" ${item.is ? 'checked' : ''}  onclick='fu(${item.id})'>
            <img src="${item.img}">
            <span>${item.name}</span>
            <span>¥${item.price}元</span>
            <button onclick="jia(${item.id})">+</button>
            <span>${item.num}</span>
            <button onclick="jian(${item.id})">-</button>
        </li>
                `
            })
            zong()
        }
        // 数量加
        function jia(i) {
            var a = gwc.find(item => item.id == i)
            a.num++
            apply()
            zong()
        }
        // 数量减
        function jian(i) {
            var a = gwc.find(item => item.id == i)
            if (a.num != 0) {
                a.num--
                apply()
                zong()
            }
        }
        // 总价
        function zong() {
            var num = 0
            gwc.forEach(item2 => {
                if (item2.is) {
                    num += item2.price * item2.num
                }
                money.innerHTML = num
            })
        }
        var money = document.querySelector('.money')
        function fu() {
            var a = gwc.find(item => item.id == i)
            a.is != a.is
            zong()
        }
        
        
    </script>
</body>

</html>